<template>
  <div class="app-container">

    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"  label-width="90px">
      <el-form-item  prop="couponName">
        <el-input
          v-model="queryParams.goodsName"
          placeholder="商品名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item  prop="getType">
        <el-cascader placeholder="请选择商品分类" v-model="category" :options="goodsCategoryList" :props="catProps" clearable  @change="init"></el-cascader>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row>
      <div
        class="wap-content-item"
        :class="{ active: item.selected }"
        @click="checkedGoods(item, index)"
        v-for="(item, index) in goodsData"
        :key="index">
        <div>
          <img :src="item.thumbnail" alt="" />
        </div>
        <div class="wap-content-desc">
          <div class="wap-content-desc-title">{{ item.goodsName }}</div>
          <div class="wap-sku">{{ item.goodsUnit }}</div>
          <div class="wap-sku"><el-tag :color="item.salesModel === 'RETAIL' ? 'default' : 'geekblue'">{{item.salesModel === "RETAIL" ? "零售型" : "批发型"}}</el-tag></div>
          <div class="wap-content-desc-bottom">
            <div>￥{{ item.price }}</div>
          </div>
        </div>
      </div>
    </el-row>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="init"
    />


    <div slot="footer" class="dialog-footer" style="margin-top: 40px;text-align: center">
      <el-button type="primary" @click="submit">确 定</el-button>
      <el-button @click="close">取 消</el-button>
    </div>

  </div>
</template>
<script>
import { categoryTreeList } from '@/api/mall/goods/category'
import { getGoodsSkuData } from '@/api/mall/goods/goods'
export default {
  name: "GoodsDialog",
  data() {
    return {
      type: this.chooseType, //单选或者多选 single  multiple
      selectedData: this.selectedWay,
      skuList: [], // 商品sku列表
      total: 0, // 商品总数
      queryParams: {
        // 商品请求参数
        pageNum: 1,
        pageSize: 10,
        order: "desc",
        goodsName: "",
        sn: "",
        categoryPath: "",
        marketEnable: "UPPER",
        authFlag: "PASS",
        sort:"createTime"
      },
      category: [], // 分类
      goodsData: [], // 商品数据
      empty: false, // 空数据
      loading: false, // 加载状态
      goodsCategoryList: [],
      catProps: {
        value: 'id',
        label: 'name'
      },
    };
  },
  props: {
    selectedWay: {
      type: Array,
      default: function () {
        return new Array();
      },
    },
    chooseType: {
      type: String,
      default : 'multiple'
    }
  },
  mounted() {
    this.loadGoodsCategory()
    this.init();



    console.log(JSON.stringify(this.selectedData))
  },
  methods: {
    loadGoodsCategory(){
      categoryTreeList().then( res => {
        this.goodsCategoryList = res.data
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.init();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.category = []
      this.init();
    },
    // 获取列表方法
    initGoods(res) {
      if (res.rows.length != 0) {
        res.rows.forEach((item) => {
          item.selected = false;
          item.___type = "goods"; //设置为goods让pc wap知道标识
          this.selectedWay.forEach((e) => {
            if (e.id && e.id === item.id) {
              item.selected = true;
            }
          });
        });
        /**
         * 解决数据请求中，滚动栏会一直上下跳动
         */
        this.total = res.total;
        this.goodsData.push(...res.rows);
      } else {
        this.empty = true;
      }
    },
    // 查询商品
    init() {
      this.queryParams.categoryPath = this.category.join(",")
      getGoodsSkuData(this.queryParams).then((res) => {
        this.skuList = []
        this.goodsData = []
        // 商品
        this.initGoods(res);
      });
    },
    /**
     * 点击商品
     */
    checkedGoods(val, index) {
      // 如果单选的话
      if (this.type != "multiple") {
        this.goodsData.forEach((item) => {
          item.selected = false;
        });
        this.selectedData = [];
        val.selected = true;
        this.selectedData.push(val);

        return false;
      }

      if (val.selected == false) {
        val.selected = true;
        this.selectedData.push(val);
      } else {
        val.selected = false;
        for (let i = 0; i < this.selectedData.length; i++) {
          if (this.selectedData[i].id === val.id) {
            this.selectedData.splice(i, 1);
            break;
          }
        }
      }
    },
    submit() {
      this.$emit("selectedGoodsData", this.selectedData);
    },
    close() {
      this.$emit("closeGoodsData");
    }
  },
};
</script>
<style scoped lang="scss">
@import "./style.scss";
.wap-content {
  width: 100%;
}
.empty {
  text-align: center;
  padding: 8px 0;
  width: 100%;
}
.wap-content {
  flex: 1;
  padding: 0;
}
.wap-content-list {
  position: relative;
}
.wap-content-item {
  width: 210px;
  margin: 10px 7px;
  padding: 6px 0;
  float: left;
}
// .wap-content-item{

// }
.active {
  background: url("../../assets/selected.png") no-repeat;
  background-position: right;
  background-size: 10%;
}
</style>
